<template>
  <div class="dialog__container">
    <el-dialog
      v-model="dialogVisible"
      title="修改工艺步骤"
      draggable
      width="50%"
      :before-close="beforeClose"
    >
      <div class="dialog__body__container">
        <div class="body__row__container">
          <div class="row__label">工艺步骤</div>
          <div class="row__value">{{ currentCraft.content || "" }}</div>
        </div>
        <div class="body__row__container">
          <div class="row__label">当前状态</div>
          <div class="row__value">
            {{ Number(currentCraft.isDone) === 1 ? "已完成" : "未完成" }}
          </div>
        </div>
        <template
          v-if="currentCraft.isInputNum === 1 && currentCraft.isDone == 0"
        >
          <div class="body__row__container">
            <div class="row__label">预计数量</div>
            <div class="row__value">
              {{ currentCraft.defaultReportingNum || 0 }}
            </div>
          </div>
          <div class="body__row__container">
            <div class="row__label">已报工数量</div>
            <div class="row__value">{{ currentCraft.workedNumber || 0 }}</div>
          </div>
          <div class="body__row__container">
            <div class="row__label">
              {{
                Number(currentCraft.isDone) === 1
                  ? "填写取消数量"
                  : "填写报工数量"
              }}
            </div>
            <div class="row__value">
              <el-input-number
                placeholder="请输入数量"
                v-model="currentCraft.workNumber"
                :min="0"
              />
            </div>
          </div>
        </template>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmDialog"> 确定 </el-button>
          <el-button @click="beforeClose"> 取消 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="EditCraftStateDialog">
import { type CraftItem, CraftContent } from "@/api/craft/types";
defineOptions({
  name: "EditCraftStateDialog",
  inheritAttrs: false,
});
const dialogVisible = ref<boolean>(false);
const currentCraft = ref<any>({});
const currentIndex = ref<number>(-1);
const emits = defineEmits(["success"]);
// 打开弹窗逻辑
const handleOpen = (data: {
  item: CraftContent;
  index: number;
  defaultReportingNum: number;
}) => {
  console.log("弹窗里面的data  ", data);
  if (data.item) {
    currentCraft.value = {
      ...data.item,
      defaultReportingNum: data.defaultReportingNum
        ? data.defaultReportingNum
        : 0, // 预计数量
      workedNumber: data.item.workNumber ? data.item.workNumber : 0, // 已经报过的数量
      workNumber: data.item.workNumber
        ? data.item.workNumber
        : data.defaultReportingNum
        ? data.defaultReportingNum
        : 0, // 当前需要报工的数量
    };
    currentIndex.value = data.index;
  }

  dialogVisible.value = true;
};
defineExpose({
  handleOpen,
});
// 关闭函数
const beforeClose = (done: any) => {
  currentCraft.value = {};
  currentIndex.value = -1;
  // 处理关闭逻辑
  if (typeof done === "function") {
    done();
  } else {
    dialogVisible.value = false;
  }
};

// 确认弹窗函数
const confirmDialog = () => {
  let msg = "";
  if (currentCraft.value.isDone == 0) {
    msg = "您确定要将该工艺步骤设为完成状态吗？";
  } else {
    msg = "您确定要将该工艺步骤设为未完成状态吗？";
  }

  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      if (currentCraft.value.isDone == 0) {
        currentCraft.value.isDone = 1;
      } else {
        currentCraft.value.isDone = 0;
        currentCraft.value.workedNumber =
          currentCraft.value.workedNumber - currentCraft.value.workNumber >= 0
            ? currentCraft.value.workedNumber - currentCraft.value.workNumber
            : 0;
      }
      emits("success", {
        item: { ...currentCraft.value },
        index: currentIndex.value,
      });
      dialogVisible.value = false;
    })
    .catch(() => {
      ElMessage({
        message: "已取消",
        type: "info",
      });
    });
};
</script>

<style lang="scss" scoped>
.dialog__container {
  .dialog__body__container {
    box-sizing: border-box;
    padding-right: 15px;
    max-height: 70vh;
    overflow-y: auto;
    .body__row__container {
      padding: 10px 15px;
      display: flex;
      align-items: center;
      .row__label {
        flex-shrink: 0;
        margin-right: 10px;
        font-weight: bold;
        color: var(--el-text-color-regular);
      }
      .row__value {
        flex: 1 1 auto;
      }
    }
  }
}
</style>
